<template>
  <div>
    <el-table :data="tableData.records"
              border
              style="width: 100%">
      <el-table-column prop="id"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column prop="nikeName"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column label="头像"
                       width="80"
                       align="center">
        <template slot-scope="scope">
          <el-avatar shape="square"
                     :size="50"
                     :src="scope.row.avatarUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="mobile"
                       label="手机号"
                       width="120">
      </el-table-column>
      <el-table-column label="用户角色"
                       width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userRole === 'ADMIN'"
                  type="danger"
                  effect="dark">{{scope.row.userRole | formatterRole}}</el-tag>
          <el-tag v-if="scope.row.userRole === 'STAFF'"
                  effect="dark">{{scope.row.userRole | formatterRole}}</el-tag>
          <el-tag v-if="scope.row.userRole === 'USER'"
                  type="success"
                  effect="dark">{{scope.row.userRole | formatterRole}}</el-tag>
          <el-tag v-if="scope.row.userRole === ''"
                  type="info"
                  effect="dark">{{scope.row.userRole | formatterRole}}</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="用户状态"
                       width="80">
        <template slot-scope="scope">
          <span>{{scope.row.userStatus|formatterStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="120">
      </el-table-column>
      <el-table-column prop="level"
                       label="等级"
                       width="50">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="handleEdit(scope.$index, scope.row)">购物车</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">订单</el-button>
          <el-button size="mini"
                     @click="handleDelete(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { queryList } from '@/api/user'
export default {
  data () {
    return {
      queryUser: {
        page: 1,
        size: 4
      },
      tableData: {}
    }
  },
  filters: {
    formatterRole (val) {
      if (val === 'USER') {
        return '用户';
      } else if (val === 'STAFF') {
        return '员工';
      } else if (val === 'ADMIN') {
        return '管理员';
      } else {
        return '未设置';
      }
    },
    formatterStatus (val) {
      if (val === 'ACTIVE') {
        return '活跃';
      } else if (val === 'UNACTIVE') {
        return '员工';
      } else {
        return '未设置';
      }
    }
  },
  created () {
    queryList(this.queryUser).then((res) => {
      this.tableData = res.data
    })
  },
  methods: {
    list (type) {
      console.log(type);
      if (type === 'all') {
        this.queryUser.userRole = null
      } else {
        this.queryUser.userRole = type
      }
      queryList(this.queryUser).then((res) => {
        this.tableData = res.data
        console.log(res);
      })
    }
  }

}
</script>

<style lang="sass" scoped>
</style>